<template>
	<view id="MyInfo">
		<view class="card">
			<view class="personalInfoBox">
				<view class="personalInfo">
					<image :src="userInfo.headImage" mode=""></image>
					<view class="info">
						<h3>{{userInfo.username}}</h3>
						<p>
							邀请码：
							<span>{{userInfo.invCode}}</span>
						</p>
					</view>
				</view>
				<view class="goldNum">
					<image src="../../static/img/GoldCoin.png" mode=""></image>
					<view class="goldInfo">
						<h3>金币</h3>
						<span>{{userInfo.score}}</span>
					</view>
				</view>
			</view>
			<view class="btn">
				<button @tap="jump('WD')">提现</button>
				<button @tap="jump('')">交易记录</button>
			</view>
		</view>
		<uni-list>
			<cmd-cell-item title="常见问题" arrow @click="jump('problem')" />
			<cmd-cell-item title="设置" arrow @click="jump('set')" />
			<cmd-cell-item title="兑换记录" arrow @click="jump('gold')" />
			<cmd-cell-item title="关于" addon="版本1.0.1" arrow @click="jump('about')"></cmd-cell-item>
		</uni-list>
	</view>
</template>

<script>
	import uniList from '@dcloudio/uni-ui/lib/uni-list/uni-list.vue'
	import uniListItem from '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue'
	import cmdCellItem from '@/components/cmd-cell-item/cmd-cell-item.vue'

	export default {
		data() {
			return {
				active: false,
				userInfo:{}
			};
		},
		components: {
			uniList,
			uniListItem,
			cmdCellItem
		},
		onLoad() {
			let _this = this;
			this.$post(configUrl.getUserData,{
				token:uni.getStorageSync("token")
			}).then((res) => {
				_this.userInfo = res.data
			})
		},
		onShow() {

		},
		onHide() {

		},
		methods: {
			jump(str) {
				let _this = this;
				let Url = "../TransactionRecords/TransactionRecords";
				if(str == "set"){
					Url = "../setting/setting"
				}else if(str == "problem"){
					Url = "../CommonProblems/CommonProblems"
				}else if(str == "about"){
					Url = "../About/about"
				}else if(str == "WD"){
					Url = "../Withdrawal/withdrawal"
				}else if(str == "gold" ){
					Url = "../GoldTransaction/GoldTransaction"
				}
				else{
					Url = "../TransactionRecords/TransactionRecords"
				}
				uni.navigateTo({
					url: Url+"?dataObj="+JSON.stringify(_this.userInfo),
					success: res => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					},
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	input {
		outline: none;
		border: none;
		list-style: none;
	}

	#MyInfo {
		background: url("") no-repeat top center;
		background-size: 100% auto;
		padding-top: 52upx;
		.card {
			background: #FFFFFF;
			box-shadow: 0 3px 13px 2px rgba(171, 36, 36, 0.35);
			border-radius: 12px;
			width: 670upx;
			height: 250upx;
			margin: 0 auto 52upx;
			.personalInfoBox {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-top: 41upx;
				padding-bottom: 29upx;

				.personalInfo {
					display: flex;
					justify-content: space-around;
					align-items: flex-start;

					image {
						width: 84upx;
						height: 84upx;
						border-radius: 50%;
						overflow: hidden;
					}

					.info {
						margin-left: 16upx;

						h3 {
							font-family: PingFangSC-Regular;
							font-size: 32upx;
							color: #BA2B2B;
							letter-spacing: 0.4upx;
							text-align: left;
						}

						p {
							font-family: PingFangSC-Regular;
							font-size: 24upx;
							color: #BA2B2B;
							letter-spacing: 0.3upx;
							text-align: left;

							span {
								padding-left: 10upx;
							}
						}
					}
				}

				.goldNum {
					display: flex;
					justify-content: space-around;
					align-items: center;

					image {
						width: 64upx;
						height: 64upx;
					}

					.goldInfo {
						font-family: PingFangSC-Regular;
						font-size: 24upx;
						color: #BA2B2B;
						letter-spacing: 0.3upx;
						margin-left: 16upx;

						h3 {
							padding-bottom: 16upx;
						}
					}
				}

			}

			.btn {
				width: 640upx;
				border-top: 2upx solid #BA2B2B50;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				padding-top: 10upx;

				button {
					width: 50%;
					font-family: PingFangSC-Regular;
					font-size: 32upx;
					color: #BA2B2B;
					letter-spacing: 0.4upx;
					background: #FFFFFF;
					border-radius: 0;
				}

				button:first-child {
					border-right: 2upx solid #BA2B2B50;
				}
			}
		}

	}
</style>
